<template>
  <div>
    <!-- header -->
    <console-header></console-header>
          <!-- <el-row :gutter="10"
            <el-col :span="4">
              <div class="blue header-box">
                <i class="el-icon-user-solid icon-center"></i>
              </div>
              <div style="padding: 14px;text-align:center;">
                <span>基本信息</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="red header-box">
                <i class="el-icon-s-data icon-center"></i>
              </div>
              <div style="padding: 14px;text-align:center;">
                <span>考勤统计</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="orange header-box">
                <i class="el-icon-s-order icon-center"></i>
              </div>
              <div style="padding: 14px;text-align:center;">
                <span>绩效考核</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="green header-box">
                <i class="el-icon-s-platform icon-center"></i>
              </div>
              <div style="padding: 14px;text-align:center;">
                <span>我的档案</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div></div>
              <div class="pink header-box">
                <i class="el-icon-message-solid icon-center"></i>
              </div>
              <div style="padding: 14px;text-align:center;">
                <span>待办事项</span>
              </div>
            </el-col>
          </el-row> -->
    <!-- 考勤统计图 -->
    <el-row>
      <el-col><div style="padding:20px;font-size:20px;">| 本周考勤统计</div></el-col>
    </el-row>
    <el-row>
      <el-col>
        <div ref="chart" style="width: 100%;height:400px;margin-top:40px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getChartBar } from "@/api/attendance";
import {getTodos,setTodo} from '@/api/employee'
import { mapGetters } from "vuex";
import consoleHeader from '@/components/console-header.vue'
import ConsoleHeader from '../../components/console-header.vue';

export default {
  components:{ consoleHeader },
  data() {
    return{
      attrs: [
        {
          key: "today",
          highlight: "red",
          dates: new Date()
        }
      ],
      todos:[],
      TodosVisible:false,
      todoForm:{
        TODO:'',
        time:'',
        tag:''
      },
      todoRules:{
        TODO: [
          { required: true, message: '请输入待办事项', trigger: 'blur' },
        ],
        time: [
          { required: true, message: '请输入提醒时间', trigger: 'blur' },
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.getTodos()
    this.drawChartBar();
  },
  methods: {
    async getTodos(){
      const res=await getTodos(this.userInfo.userId)
      if(res.code==200){
        this.todos=res.data.todos
      }
    },
    async drawChartBar() {
      const res = await getChartBar(this.userInfo.userId);
      //console.log(this.userInfo.userId);
      if (res.code === 200) {
        const myChart = this.$echarts.init(this.$refs.chart);
        myChart.setOption(res.data.option);
      }
    },
    setTodo(){
      this.$refs.todoRef.validate(async valid=>{
        if(!valid) return
        const res = await setTodo(this.todoForm);
        if(res.code==200){
          this.$message.success("设置成功");
          this.TodosVisible = false
        }
      })
    }
  }
};
</script>
<style scoped>
.image {
  width: 50%;
  display: block;
  margin: 0 auto;
}
.blue {
  background-color: #409eff;
}
.green {
  background-color: #67c23a;
}
.orange {
  background-color: #e6a23c;
}
.red {
  background-color: #f56c6c;
}
.gray {
  background-color: #909399;
}
.pink {
  background-color: #ffbbff;
}
.icon-center {
  font-size: 60px;
  color: #fff;
  line-height: 100px;
}
.header-box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
}
.text {
  font-size: 14px;
}
</style>